<template>
	<view>
		<withdrawal class="withdrawal" ref="withdrawal" :listBtn="listBtn"></withdrawal>
		<view class="subsectionBox">
			<uv-subsection :list="list" :current="current" mode="subsection" activeColor="#fd4a46" inactiveColor="#000"
				@change="switchChange"></uv-subsection>
		</view>
		<scroll-view v-show="current == 0" scroll-y class="content"
			:style="{height:(windowHeight - (withdrawalHeight+subsectionBoxHeight))+'px'}">
			<uv-collapse @clickText="clickText()" :accordion="true" :border="false">
				<uv-collapse-item :title="item.nickname" :name="item.mid" :icon="item.headimg"
					:value="'佣金比例:'+item.fenyong+'%'" v-for="(item,index) in partnerList" :key="index" :border="false">
					<scroll-view class="collapseContent" :scroll-y="true" :show-scrollbar="false">
						<view class="uv-collapse-content" v-for="(itemS,indexS) in item.below" :key="indexS"
							@click="listBtn(itemS)">
							<view class="uvCollapseShopImg">
								<image :src="itemS.logo"></image>
							</view>
							<view class="uvCollapseShopInfo">
								<view class="weight_bold">{{itemS.name}}</view>
								<view>{{itemS.address}}</view>
								<view class="timeByMoney">
									<text class="themeColor weight_bold">总流水：{{itemS.amount}}</text>
									<text class="themeColor weight_bold">我的收益：{{itemS.commission}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</uv-collapse-item>
			</uv-collapse>
		</scroll-view>
		<scroll-view v-show="current == 1" scroll-y class="content" style="font-size:24rpx;"
			:style="{height:(windowHeight - (withdrawalHeight+subsectionBoxHeight))+'px'}">
			<view class="uv-collapse-contentS" v-for="(item,index) in storeAdmList" :key="index" @click="listBtn(item)">
				<view class="uvCollapseShopImg">
					<image :src="item.logo"></image>
				</view>
				<view class="uvCollapseShopInfo">
					<view class="weight_bold">{{item.name}}</view>
					<view>{{item.address}}</view>
					<view class="incomeBox">
						<text class="themeColor weight_bold">营业额：{{ item.amount }}</text>
						<text class="themeColor weight_bold">所得佣金：{{item.commission}}</text>
					</view>

				</view>
			</view>
		</scroll-view>
		<loading v-if="loading"></loading>
		<view class="layer" v-show="openType == true" @click="openType = false"></view>
		<view class="layerBox" v-show="openType == true">
			<view class="shopTitle">修改利率</view>
			<view class="layerContent">
				<image :src="layerData.headimg"></image>
				<view>{{layerData.nickname}}</view>
				<view class="layerRight">
					<!-- <input @input="onKeyInput" inputmode="decimal" :value="inputValue" type="number"/> -->
					<uni-easyinput :clearable="false" @input="onKeyInput" ConfirmType="done" :value="inputValue"
						maxlength="7" :inputBorder="false" type="digit"></uni-easyinput>
					<text style="margin-left:10rpx;">%</text>
				</view>
			</view>
			<view class="operateBox">
				<text class="operateBoxCancel" @click="openType = false">取消</text>
				<text class="operateConfirm" @click="operateConfirm(layerData.mid,inputValue)">确认</text>
			</view>
		</view>

		<view class="layer" v-show="layerType == true" @click="layerType = false"></view>
		<view class="layerBoxS" v-show="layerType == true">
			<view class="shopTitle">{{shopInfo.name ? shopInfo.name :'线上收益'}}</view>
			<uDatetimePicker placeholder="至" v-model="range" :clear-icon="false" type="daterange"
				start-placeholder="开始日期" end-placeholder="结束日期" @change="dayChange" />
			<view style="width: calc(100% - 2px);margin:20rpx 0 0 1px;">
				<uv-subsection :list="listS" :current="currentS" mode="button" activeColor="#fd4a46" bgColor="#fff" inactiveColor="#000" @change="switchChangeS"></uv-subsection>
			</view>
			<scroll-view class="layerScrollView" scroll-y="true" @scrolltolower="layerLower" v-show="currentS == 0">
				<view v-for="item in shopList" class="layerContent" :key="item.id">
					<view class="uvCollapseShopImg">
						<image :src="item.headimg"></image>
					</view>
					<view class="uvCollapseShopInfo" style="margin-left:8rpx;">
						<view>{{ item.nickname }}</view>
						<view>订单编号：{{ item.order_id }}</view>
						<view class="timeByMoney">
							<text>{{ item.payment_time }}</text>
							<text class="themeColor weight_bold">+{{ ' ' }}{{ item.amount?item.amount:'0.00' }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="layerScrollView" scroll-y="true" @scrolltolower="layerLower" v-show="currentS == 1">
				<view v-for="item in shopListS" class="layerContent" :key="item.id">
					<view class="uvCollapseShopImg">
						<image :src="item.headimg"></image>
					</view>
					<view class="uvCollapseShopInfo" style="margin-left:8rpx;">
						<view>{{ item.nickname }}</view>
						<view>订单编号：{{ item.order_id }}</view>
						<view class="timeByMoney">
							<text>核销时间：{{ item.verify_time }}</text>
							<text class="themeColor weight_bold">+{{ ' ' }}{{ item.amount?item.amount:'0.00' }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	var app = getApp();
	import withdrawal from '../utils/withdrawal.vue';
	import person from '../utils/person.js';
	import uDatetimePicker from '../uni-datetime-picker_2.2.25/components/uni-datetime-picker/uni-datetime-picker.vue';
	export default {
		components: {
			withdrawal,
			uDatetimePicker
		},
		data() {
			return {
				loading: true,
				layerType: false, //是否打开弹窗
				shopInfo: '', //店铺bid 用于修改日期之后的查询
				start_date: '', // 开始日期
				end_date: '', // 结束日期
				range: [],
				shopList: [], //合伙人下级扫码支付订单list
				shopListS:[],//合伙人下级线下核销订单list
				list: ['合伙人信息', '直属实体店信息'],
				listS: ['扫码支付订单', '线下核销订单'],
				currentS: 0,
				current: 0,
				arrList: 10,
				withdrawalHeight: 0, //佣金框高度
				subsectionBoxHeight: 0, //Tab组件高度
				windowHeight: 0, //屏幕总高度
				openType: false, //是否展示修改资料
				partnerList: [], //合伙人数据list
				storeAdmList: [], //直属下级商铺list
				layerData: {}, //修改利率弹窗数据对象
				inputValue: 0, //利率初始值
				pages: 1, //流水当前页
				totalPage: 0, //流水总页面
			}
		},

		mounted() {
			uni.setStorageSync('pageType', '3'); //暂时用于提现判断,1:合伙人提现.2:商户提现 3:分公司提现
			//获取Tab高度
			uni.createSelectorQuery().in(this).select('.subsectionBox').boundingClientRect((rect) => {
				this.subsectionBoxHeight = rect.height;
			}).exec();

			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight - 50; //45为选择日期高度
				}
			});

			//获取子页面组件高度
			this.$nextTick(function() {
				this.withdrawalHeight = this.$refs.withdrawal.contentHeight;
			});

			this.getDataFun();
		},

		methods: {
			//合伙人下面店铺点击事件
			listBtn(shopInfo) {
				this.pages = 1;
				this.shopList = []; //清空数据
				this.shopListS = [];
				this.getDataFunS(shopInfo);
				this.layerType = true;
			},

			// 日期改变
			dayChange(e) {
				this.pages = 1;
				this.range = e;
				this.start_date = this.range[0];
				this.end_date = this.range[1];
				this.shopList = []; //清空数据
				this.shopListS = []; //清空数据
				this.listBtn(this.shopInfo);
			},

			//获取流水数据
			getDataFunS(shopInfo) {
				this.shopInfo = shopInfo;
				let _this = this;
				this.layerType = true;
				app.get('ApiBusiness/btransaction', {
					bid: shopInfo.bid,
					page: _this.pages,
					limit: 20,
					start_date: _this.start_date,
					end_date: _this.end_date
				}, function(res) {
					let listData = res.data.data;
					let listDataS = res.data_2.data;
					listData.forEach(item => {
						_this.shopList.push(item);
					})
					listDataS.forEach(item => {
						_this.shopListS.push(item);
					})
				});
			},

			//修改利率输入框事件
			onKeyInput(e) {
				this.inputValue = e;
			},

			//弹窗滑动底部触发事件
			layerLower(e) {
				if (this.pages < this.totalPage) {
					this.pages++;
					this.getDataFun(this.shopInfo);
				}
			},

			//修改利率确认事件
			operateConfirm(mid, value) {
				let _this = this;
				this.loading = true;
				app.post('ApiStore/changePartnerInfo', {
					partner_id: mid,
					fenyong: value,
				}, function(res) {
					_this.loading = false;
					if (res.status == 1) {
						app.success('修改成功');
						_this.getDataFun();
						_this.openType = false;
					} else {
						uni.showModal({
							title: "操作提示",
							content: res.msg
						})
					}

				});
			},

			//获取数据
			getDataFun() {
				let _this = this;
				app.get('ApiStore/getBranchCompanyInfo', {
					parner_page: 1,
					store_page: 1
				}, function(res) {
					let list = res.below_parner;
					let listS = res.below_store;
					//循环获取二维数组中的金额,强制保留两位小数
					list.forEach(item => {
						let listArr = item.below;
						listArr.forEach(i => {
							i.commission = i.commission.toFixed(2);
							i.amount = i.amount.toFixed(2);
						})
					})
					listS.forEach(item => {
						item.amount = item.amount.toFixed(2);
						item.commission = item.commission.toFixed(2);
					})
					_this.partnerList = list;
					_this.storeAdmList = listS;
					person.shopData.shopName = res.name; //门店名称
					person.shopData.image = res.logo; //门店图片
					person.shopData.amount = res.amount; //余额
					person.shopData.Damount = res.nocash_amount; //待结算金额
					person.shopData.Kamount = res.cash_amount; //可体现金额
					person.shopData.phone = res.tel || '暂无手机号'; //手机号
					_this.loading = false;
				});
			},

			//切换事件
			switchChange(index) {
				this.current = index;
				this.currentS = 0;
				this.start_date = ''; // 开始日期
				this.end_date = ''; // 结束日期
				this.range = []; //存放时间list
			},

			//切换事件
			switchChangeS(index) {
				this.currentS = index;
				this.start_date = ''; // 开始日期
				this.end_date = ''; // 结束日期
				this.range = []; //存放时间list
			},

			//点击文字,弹出修改弹窗
			clickText(e) {
				this.loading = true;
				let _this = this;
				this.partnerList.forEach(item => {
					if (item.mid == e) {
						this.layerData = item;
					}
				})
				this.inputValue = this.layerData.fenyong;
				setTimeout(function() {
					_this.openType = true;
					_this.loading = false;
				}, 500);

			},
		}
	}
</script>

<style lang="less">
	.size24 {
		font-size: 24rpx;
	}

	.weight_bold {
		font-weight: bold;
	}

	.themeColor {
		color: #f56c6c;
	}

	.layerScrollView {
		width: 100%;
		float: left;
		margin-top: 5px;
		height: calc(100% - 117px);
	}

	.timeByMoney {
		display: flex;
		justify-content: space-between;
	}

	.layerRight {
		margin-left: auto;
		display: flex;
		width: 30%;
		align-items: center;
	}

	.layerRight input {
		text-align: center;
		background-color: #ccc;
		border-radius: 10rpx;
	}

	.timeByMoney {
		display: flex;
		justify-content: space-between;
	}

	.layerContent {
		width: 100%;
		float: left;
		display: flex;
		margin: 20rpx 0;
		align-items: center;
	}

	.layerContent image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.line {
		width: 94%;
		float: left;
		height: 1px;
		background-color: #000;
		margin: 0 3%;
	}

	.operateBox {
		width: 100%;
		float: left;
		font-weight: bold;
		margin: 20rpx 0 30rpx 0;
	}

	.operateBoxCancel {
		line-height: 70rpx;
		background-color: #bfbfbf;
		color: #000;
		width: 40%;
		text-align: center;
		border-radius: 15rpx;
		float: left;
		margin-left: 5%;
	}

	.operateConfirm {
		width: 40%;
		float: left;
		margin-left: 5%;
		text-align: center;
		line-height: 70rpx;
		border-radius: 15rpx;
		background-color: #01B681;
		color: #fff;
	}

	.shopTitle {
		width: 100%;
		float: left;
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		color: #868686;
		line-height: 35px;
	}

	.layer {
		width: 100%;
		height: 100vh;
		float: left;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0.6;
		z-index: 1000;
	}

	.layerBox {
		width: 84%;
		float: left;
		position: fixed;
		top: 40vh;
		padding: 10rpx 20rpx 20rpx 20rpx;
		left: 8%;
		background-color: #f1f1f1;
		border-radius: 15rpx;
		z-index: 1001;
	}

	.layerBoxS {
		width: 84%;
		float: left;
		height: 70vh;
		position: fixed;
		top: 15vh;
		padding: 10rpx 20rpx 20rpx 20rpx;
		left: 8%;
		background-color: #f1f1f1;
		border-radius: 15rpx;
		z-index: 1001;
	}

	.subsectionBox {
		width: 96%;
		float: left;
		margin: 0 2%;
		height: 7vh;
		display: flex;
		align-content: center;
		flex-wrap: wrap;
	}

	.incomeBox {
		display: flex;
		justify-content: space-between;
	}

	.content {
		width: 100%;
		float: left;
	}

	.partnerListBox {
		width: 94%;
		float: left;
		margin-left: 3%;
	}

	.partnerList {
		width: 94%;
		background-color: #fdf8f6;
		float: left;
		padding: 20rpx 3%;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		display: flex;
	}

	.partnerList image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.partnerData {
		margin-left: 20rpx;
		font-size: 26rpx;
		width: calc(100% - 140rpx);
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 45rpx;
	}

	::v-deep .uv-collapse-item__content__text {
		padding: 0;
	}

	.collapseImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.uv-collapse-content {
		width: 94%;
		margin: 0 3%;
		padding: 5rpx 0 5rpx 0;
		display: flex;
		align-items: center;
	}

	.uv-collapse-contentS {
		width: 94%;
		margin: 0 3%;
		padding: 5rpx 0 20rpx 0;
		display: flex;
		align-items: center;
		/* 	background-color: aqua; */
		margin-bottom: 17rpx;
	}

	.uvCollapseShopImg {
		width: 100rpx;
		height: 100rpx;
		float: left;
	}

	.uvCollapseShopImg image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.collapseContent {
		width: 100%;
		display: flex;
		font-size: 24rpx;
	}

	.uvCollapseShopInfo {
		width: calc(100% - 115rpx);
		float: left;
		margin-left: 15rpx;
		line-height: 45rpx;
		font-size: 26rpx;
	}
</style>